<template>
	<div class="shop-process">
		<TopBar titles="购物流程"></TopBar>

		<!-- 拼团商品 -->
		<div class="group-buy-item">
			<van-card :num="num" tag="拼团购买" :price="groupItem.price" :desc="groupItem.des" :title="groupItem.sname"
			 :thumb="groupItem.pics[0]" :origin-price="groupItem.mprice" thumb-link="/home" />
		</div>

		<!-- 配送方式 -->
		<div class="distribute-way">
			<van-tabs v-model="active" animated @click="chooseDistribute">
				<van-tab title="门店自提" >
					<van-row class="shop-info">
						<van-col span="2" class="icon-middle">
							<van-icon name="location" size="18" color="red"/>
						</van-col>
						<van-col span="19" offset="1">
							<div class="name-phone">
								{{shopInfo.name}}   {{shopInfo.phone}}      
							</div>
							<div class="location">
								{{shopInfo.location}}
							</div>
						</van-col>
						<van-col span="2" class="icon-middle">
							<van-icon name="arrow" size="18"/>
						</van-col>
					</van-row>
					<!-- 用户输入 -->
					<van-row class="user-info">
						<van-cell-group>
						  <van-field
						    v-model="user.username"
						    :error = "false"
						    required
						    label="用户名"
						    placeholder="请输入用户名"
							
						  />
						  <van-field
						    v-model="user.phone"
						    required
						    label="手机号"
						    placeholder="请输入手机号"
						    :error-message="errorMsg"
						  />
						</van-cell-group>
					</van-row>
				</van-tab>
				<van-tab title="快递配送">
					<!-- 没有收货地址 -->
					<van-row v-if="userInfo.isNew">
						<van-col span="2" class="icon-middle">
							<van-icon name="plus" size="18" color="red"/>
						</van-col>
						<van-col span="19" offset="1">
							<div class="add-address">
								添加收货地址     
							</div>
						</van-col>
						<van-col span="2" class="icon-middle">
							<van-icon name="arrow" size="18"/>
						</van-col>
					</van-row>
					<van-row class="shop-info" v-else>
						<van-col span="2" class="icon-middle">
							<van-icon name="location" size="18" color="red"/>
						</van-col>
						<van-col span="19" offset="1">
							<div class="name-phone">
								{{userInfo.defaultAddress.uname}} {{userInfo.defaultAddress.phone}}    
							</div>
							<div class="location">
								{{userInfo.defaultAddress.location}}
							</div>
						</van-col>
						<van-col span="2" class="icon-middle">
							<van-icon name="arrow" size="18"/>
						</van-col>
					</van-row>
				</van-tab>
			</van-tabs>
		</div>
		<!-- 优惠券 -->
		<div class="coupon">
			<van-cell title="优惠券" is-link value="不使用优惠券"
			 @click="showPopup"
			 v-if="chosenCoupon === '' "
			 value-class="showCoup"/>
			 
			<van-cell title="优惠券" is-link 
			:value=" '-' + chosenCoupon.money" 
			@click="showPopup" 
			value-class="showCoup"
			v-else/>
			<van-popup v-model="show"
			position="bottom"
			:style="{ height: '60%' }"
			round
			close-icon="close"
			closeable>
				
				<h3 class="title">优惠券</h3>
				<!-- 优惠券列表 -->
				<div class="coupon-list">
					<van-row class="coupon-item"
					v-for="item of coupons"
					:key="item.id"
					@click="chooseCoupon(item.id)">
						<van-col span="6" class="coup-money">
							￥ {{item.money}}
						</van-col>
						<van-col span="18">
							<div class="condition">
								{{item.condition}}
							</div>
							<div class="end-date">
								{{item.endDate}}
							</div>
						</van-col>
					</van-row>
				</div>
				<van-button block color="red" round class="not-use-btn" @click="chooseCoupon(-1)">不使用优惠券</van-button>
			</van-popup>
		</div>
		<!-- 支付方式和留言 -->
		<div class="pay-way-msg"> 
			<van-row class="balance" @click="choosePay(1)">
				<van-col span="2">
					<van-icon name="balance-pay" />
				</van-col>
				<van-col span="19" offset="1">
					余额支付 950.00
				</van-col>
				<van-col span="2">
					<van-icon :name="iconName1" color="red"/>
				</van-col>
			</van-row>
			<van-row class="wechat" @click="choosePay(2)">
				<van-col span="2">
					<van-icon name="certificate" />
				</van-col>
				<van-col span="19" offset="1">
					微信支付
				</van-col>
				<van-col span="2">
					<van-icon :name="iconName2" color="red"/>
				</van-col>
			</van-row>
			<van-field
			  v-model="leaveMsg"
			  rows="2"
			  autosize
			  label="留言"
			  type="textarea"
			  maxlength="200"
			  placeholder="请输入留言"
			  show-word-limit
			/>
		</div>
		
		<!-- 确认按钮 -->
		<div class="confirm-pay">
			<van-row>
				<van-col span="16">
					应付款金额： <span class="total-price">￥{{totalPrice}}
					<span v-show=" distributeWay === '门店自提' ">(免运费)</span>
					<span v-show=" distributeWay === '快递配送' ">(运费：{{distributePrice}})</span>
					</span> 
				</van-col>
				<van-col span="8" class="confirm-btn" @click="confirmPay">
					确认支付
				</van-col>
			</van-row>
		</div>
		<BottomBar></BottomBar>
	</div>
</template>

<script>
	// 所有组件
	import allComponent from '../util/allComponent.js'
	// 模拟数据
	import {shopProcessData} from '../util/mockData.js'
	// 引入pop弹出层组件
	import Vue from 'vue';
	import { Popup,Toast  } from 'vant';
	Vue.use(Popup);
	// 提示组件
	Vue.use(Toast);
	
	export default {
		name: 'ShopProcess',
		data: function() {
			return {
				groupItem: shopProcessData.groupBuyItem, // 模拟拼团商品数据
				
				num:'', // 商品数量
				
				active: 0, // 激活的按钮
				
				user:{
					username:'',
					phone:''
				}, // 用户输入
				
				errorMsg:'' ,// 错误信息
				
				shopInfo:shopProcessData.shopInfo, // 商铺信息
				
				userInfo:shopProcessData.userInfo, // 用户信息
				
				distributeWay:'门店自提', // 配送方式
				
				show:false, // 显示弹出层
				
				coupons:shopProcessData.coupons, // 优惠券列表
				
				chosenCoupon:'', // 已选择的优惠券
				
				leaveMsg:'', // 留言
				
				payWay:'', // 支付方式
				
				iconName1:'checked',
				iconName2:'passed', // 选中状态
				
				distributePrice:10 //运费
			}
		},
		components: {
			TopBar: allComponent.TopBar,
			BottomBar: allComponent.BottomBar,
		},
		methods:{
			showPopup(){
				this.show = true;
			},
			chooseCoupon(cid){
				this.show = false;
				if(cid === -1){
					this.chosenCoupon = '';
					return;
				}
				this.chosenCoupon = this.coupons[cid-1];
			},
			choosePay(type){
				if(type === 1){
					this.payWay = 'balance';
					this.iconName1 = 'checked';
					this.iconName2 = 'passed'
				}
				if(type === 2){
					this.payWay = 'wechat';
					this.iconName1 = 'passed';
					this.iconName2 = 'checked'
				}
			},
			chooseDistribute(name,title){
				this.distributeWay = title;
			},
			confirmPay(){
				let order = {}; // 初始化order
				if(this.distributeWay === '门店自提'){
					if(this.user.uname == '' || this.user.phone == ''){
						Toast({
						  message: '请填入个人信息',
						  position: 'bottom',
						  duration:1500,
						  icon: 'fail',
						});
						return;
					}else {
						order.user = this.user;
					}
				}else{
					let userInfo = this.userInfo;
					if( userInfo.defaultAddress === undefined){
						Toast({
						  message: '请添加地址',
						  position: 'bottom',
						  duration:1500,
						  icon: 'fail',
						});
						return;
					} else {
						order.address = userInfo.defaultAddress;
					}
				}
				
				order.shopItem = this.groupItem;
				order.totalPrice = this.totalPrice;
				order.leaveMsg = this.leaveMsg;
				
				if(this.userInfo.buyWay === 'alone'){
					if(this.payWay === 'balance'){
						this.$router.push({name:'Home'})
						//进入订单详情
					}else {
						// 进入微信支付流程
						// 进入订单详情
					}
				}else {
					if(this.payWay === 'balance'){
						this.$router.push({name:'GroupDetail'})
						//进入拼团详情，提示开团成功
					}else {
						// 进入微信支付流程
						// 进入拼团详情，提示开团成功
					}
				}
				
				// console.log(order);
				// Toast.success('购买成功!')
				// this.$router.push({name:'Home'})
			}
		},
		watch:{
			leaveMsg:function(newV,oldV){
				if(newV.length >= 200){
					Toast.fail({
					  message: '字数超出限制',
					  position: 'bottom',
					  duration:1000,
					  
					});
				}
			}
		},
		computed:{
				totalPrice:function(){
					let tmp = 0;
					tmp = this.groupItem.price * this.num;
					if(this.chosenCoupon !== ''){
						tmp -= this.chosenCoupon.money;
					}
					if(this.distributeWay === '快递配送'){
						tmp += this.distributePrice;
					}
					return tmp;
				}
		},
		mounted() {
			let sid = this.$route.params.id;
			let snum = this.$route.params.num;
			let groupItem = this.$store.state.commodities.filter((item)=>{
				return sid === item.id;
			})
			
			this.num = snum;
			this.groupItem = groupItem[0];
		}
	}
</script>

<style scoped="scoped">
	.shop-process {
		padding: 10px;
		padding-bottom: 4.5rem;
		color: #333;
	}

	.group-buy-item {
		border: 1px solid #ddd;
		border-radius: 5px;
	}
	
	.distribute-way {
		margin-top: 0.625rem;
		padding: 0.625rem;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
	.shop-info {
		padding: 0.625rem 0;
	}
	.icon-middle {
		height: 50px;
		line-height: 50px;
	}
	.van-icon {
		vertical-align: middle;
	}
	.name-phone,
	.location{
		height: 25px;
		
	}
	.name-phone {
		line-height: 35px;
		font-size: 14px;
	}
	.location {
		line-height: 25px;
		font-size: 13px;
		color: #aaa;
	}
	.user-info {
		border: 0.0625rem dotted #aaa;
		border-radius: 0.1875rem;
	}
	.add-address {
		height: 50px;
		line-height: 50px;
	}
	.coupon {
		margin-top:0.625rem;
		border: 1px solid #aaa;
		border-radius: 5px;
	}
	.coupon-list {
		padding: 10px;
	}
	.title {
		text-align: center;
		color: #333;
	}
	.coupon-item {
		box-shadow: 0 0 3px #ddd;
		border-radius: 5px;
		padding: 5px 0;
		color: red;
		margin-top: 10px;
	}
	.coup-money {
		font-size: 1.5625rem;
		text-align: center;
		line-height: 3.125rem;
		font-weight: 700;
	}
	.condition {
		font-weight: 700;
		line-height: 1.5625rem;
	}
	.end-date {
		font-size: 0.875rem;
		font-weight: 550;
		line-height: 1.5625rem;
	}
	.not-use-btn {
		font-weight: 550;
	}
	.showCoup {
		color: red;
		font-size: 14px;
		font-weight: 550;
	}
	.pay-way-msg {
		margin-top: 0.625rem;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 0.3125rem;
	}
	.balance,
	.wechat {
		line-height: 30px;
		font-weight: 550;
		border-bottom: 1px solid #ddd;
		padding: 5px 0;
	}
	.total-price {
		color: red;
		font-size: 16px;
		font-weight: 550;
	}
	.confirm-pay {
		font-size: 14px;
		height: 3.125rem;
		line-height: 3.125rem;
		/* box-shadow: 0 0 3px #aaa; */
		border: 1px solid #ddd;
		padding-left: 5px;
		margin-top: 10px;
	}
	.confirm-btn {
		background-color: red;
		color: #fff;
		font-weight: 550;
		text-align: center;
	}
</style>
